<template>  
  <view class="context">
     <view v-if="recordingList == ''" class="emptytateBox">
        <view class="emptyTate">
          <image
            src="../static/image/pagesHealth/emptyTate.png"
            mode="scaleToFill"
            class="healthImg"
          />
          <view class="healthTitle">未查询到您的健康检测数据</view>
        </view> 
     </view>
     <view v-else v-for="(item,index) in recordingList" :key="index" class="recordingBox" @tap="recordingClick(item)">
        <view>
           <view class="identityName">{{ item.identityName }} 
            <u-icon :name="item.gender == 1 ? 'man' : 'woman'" color="#2979ff" size="28" :style="item.gender == 2 ? 'transform: rotate(45deg);' : ''"></u-icon>
           </view>
           <view class="createTime">最近测评时间: {{ item.createTime }}</view>
        </view>
        <view class="healthScore">
           <view class="totalScore" :style="item.totalScore <65 ? 'color:#D12C25' : item.totalScore <85 && item.totalScore >= 65 ? 'color:#ffc123' : 'color:#28c445'">{{ item.totalScore }}分{{ item.totalScore <65 ? '(较差)' : item.totalScore <85 && item.totalScore >= 65 ? '(正常)' : '(优秀)' }}</view>
           <view class="healthConditions">健康情况</view>
        </view>
        <view>
           <u-icon name="arrow-right" color="#999999"></u-icon>
        </view>
        <view class="triangle" v-show="item.resultId == 0">
          <text class="example">示例</text>
        </view>
     </view>
  </view>
</template>

<script>
import { selectRecording  } from '../api/health';
  export default {
   data() {
    return {
      recordingList:[],
      status:0,
      pageNumber:1,
      pageSize:15,
      pageStatus: true,
    }
  },
  onLoad() { 
    this.getList()
  },
  onPullDownRefresh() {
    this.pageNumber = 1
    this.getList()
    setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
  },
  onReachBottom() {
    console.log(111);
    if (this.pageStatus) {
      this.pageNumber++
      this.getList()
    }
  },
  methods: {
    getList() {
      //健康检测接口
      let obj = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
      }
      selectRecording(obj).then(res => {
        console.log('检测结果记录',res);
        if(this.pageNumber == 1) {
          res.data.appResults.unshift(
          {
                "resultId":0,
                // "userId": res.data.appResults.userId,
                // "riderId": res.data.appResults.riderId,
                // "cardiographId": "1853714535656067072",
                // "identityNumber": "141124199912070157",
                "identityName": "小明",
                // "orderNum": "HXZX1853713106556030976",
                "gender": 2,
                "totalScore": 100,
                "createTime": "1999-11-05 16:22:41"
            }
          )
          this.recordingList = res.data.appResults
        }else {
          this.recordingList =  this.recordingList.concat(res.data.appResults)
        }
        if (this.pageSize > res.data.length) {
          this.pageStatus = false
        } else {
          this.pageStatus = true
        }
      })
    },
    recordingClick(e) {
      uni.navigateTo({
        url:`/pagesHealth/testingDetails?resultId=${e.resultId}&cardiographId=${e.cardiographId}`
      })
    }
  }
 }
</script>

<style lang="scss" scoped>
.context {
 background: #F5F5F5;
 box-sizing: border-box;
 padding: 32rpx;
 min-height: 100vh;

 .Healthscreening {
  height: 50rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  line-height: 50rpx;
  text-align: center;
 }
 
 .recordingBox {
   height: 140rpx;
   background: #FFFFFF;
   border-radius: 8rpx 8rpx 8rpx 8rpx;
   margin-top: 16rpx;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 28rpx 26rpx;
   position: relative;

   .triangle {
    position: absolute;
    width: 56rpx;
    height: 56rpx;
    background:linear-gradient(135deg,#5da859,#5da859 50%, transparent 50%,transparent 100%);
    left: 0;
    top: 0;
    color: #FFFFFF;

    .example {
      display: inline-block;
      transform: rotate(-45deg);
      font-size: 18rpx;
    }
   }
 }

 .createTime {
   width: 368rpx;
   height: 28rpx;
   font-family: PingFang SC, PingFang SC;
   font-weight: 400;
   font-size: 20rpx;
   line-height: 28rpx;
   color: #333333;
   white-space: nowrap;
 }

 .totalScore {
   height: 40rpx;
   font-family: PingFang SC, PingFang SC;
   font-weight: 500;
   font-size: 28rpx;
   color: #28C445;
   line-height: 40rpx;
   white-space: nowrap;
 }

 .identityName {
   height: 44rpx;
   font-family: PingFang SC;
   font-weight: 400;
   font-size: 32rpx;
   color: #333333;
   line-height: 44rpx;
 }

 .healthConditions {
   height: 28rpx;
   font-family: PingFang SC, PingFang SC;
   font-weight: 400;
   font-size: 20rpx;
   line-height: 28rpx;
 }

 .healthScore {
   width: 192rpx;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 .emptytateBox {
    margin-top: 180rpx;
 }

 .emptyTate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

 .healthImg {
  width: 378rpx;
  height: 362rpx;
 }

 .healthTitle {
  margin-top: 150rpx;
 }
}
</style>